<template>
  <el-table size='mini' ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;margin-top:10px;">
    <el-table-column prop="id" :label="$t('序号')" align='center' width="100"></el-table-column>
    <el-table-column prop="protocol" :label="$t('协议类型')" align='center' min-width="100">
      <template slot-scope="scope">
        {{protocolList[scope.row.protocol]}}
      </template>
    </el-table-column>
    <el-table-column prop="user_name" :label="$t('用户名')" align='center' min-width="100">
      <template slot-scope="scope">
        <tooltip :copyText="scope.row.user_name" class="wid190">
        </tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="mode" :label="$t('工作模式')" align='center' min-width="100">
      <template slot-scope="scope">
        {{modeList[scope.row.mode]}}
      </template>
    </el-table-column>
    <el-table-column prop="local_address" :label="$t('本端地址显示')" align='center' min-width="100">
      <template slot-scope="scope">
        <tooltip :copyText="scope.row.local_address" class="wid190">
        </tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="remote_address" :label="$t('远端地址显示')" align='center' min-width="100">
      <template slot-scope="scope">
        <tooltip :copyText="scope.row.remote_address" class="wid190">
        </tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="interface" :label="$t('接口名称显示')" align='center' min-width="100">
      <template slot-scope="scope">
        <tooltip :copyText="scope.row.interface" class="wid190">
        </tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="status" :label="$t('隧道的状态')" align='center' min-width="100">
      <template slot-scope="scope">
        <tooltip :copyText="scope.row.status" class="wid190">
        </tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { getTunnelArray } from '@/api/network/l2tp/tunnel'
export default {
  name: 'Tunnel',
  data () {
    return {
      tableData: [],
      protocolList: {
        'l2tp': 'L2TP',
        'pptp': 'PPTP'
      },
      modeList: {
        'server': this.$t('服务端'),
        'client': this.$t('客户端')
      }
    }
  },
  created () {
    this.listData()
  },
  methods: {
    // 列表
    listData () {
      getTunnelArray().then(res => {
        if (res.status === 0) {
          this.tableData = res.info
        }
      })
    }
  }
}
</script>
